<template>
    <div class="performance-chart card">
        <h-section title="需求数量统计">
            <div>
                <div class="filter-bar">
                    <a-form layout="inline">
                        <a-row :gutter="24">
                            <a-col :span="8">
                                <a-form-item label="需求大类">
                                    <a-select placeholder="请选择" v-model:value="query.requireType">
                                        <a-select-option :key="item.value" v-for="item of options.requireType">
                                            {{ item.name }}
                                        </a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item>
                                    <a-radio-group v-model:value="query.dateType">
                                        <a-radio-button :value="item.value" v-for="item of options.dateType" :key="item.value"> {{ item.name }} </a-radio-button>
                                    </a-radio-group>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item>
                                    <a-range-picker @change="rangeDateChange" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <div style="width: 100%; height: 300px" ref="chartRef" />
            </div>
        </h-section>
    </div>
</template>
<script lang="ts">
import api from '@/api';
import { useEcharts } from '@/hooks/common/useEcharts';
import { defineComponent, ref, reactive, toRefs, watch } from 'vue';
export default defineComponent({
    name: 'RequireNumChart',
    props: {
        detail: { type: Object, default: () => ({}) }
    },
    setup(props) {
        const chartRef = ref<any>();
        const state = reactive<any>({
            query: {
                dateType: 'week',
                requireType: 'business',
                startRang: '',
                endRang: '',
                system: ''
            },
            options: {
                requireType: [
                    { name: '业务需求', value: 'business' },
                    { name: '产品需求', value: 'product' }
                ],
                dateType: [
                    { name: '本周', value: 'week' },
                    { name: '本月', value: 'month' },
                    { name: '全年', value: 'year' }
                ]
            },
            lineOption: {
                color: null,
                legend: {
                    orient: 'vertical',
                    data: ['新增', '上线'],
                    x: 'right',
                    y: 'center',
                    padding: [0, 0, 0, 200],
                    itemWidth: 14
                },
                tooltip: {},
                xAxis: { type: 'category', data: [] },
                yAxis: {
                    name: '需求数量（个）',
                    nameLocation: 'center', // 垂直居中
                    nameRotate: 90, // 旋转90度
                    nameGap: 40 // 距离y轴距离
                },
                series: [
                    {
                        name: '新增',
                        type: 'bar',
                        data: []
                    },
                    {
                        name: '上线',
                        type: 'bar',
                        data: []
                    }
                ]
            }
        });
        const { setOptions } = useEcharts(chartRef, state.lineOption);
        const rangeDateChange = (date, dateString) => {
            state.query.dateType = 'range';
            state.query.startRang = dateString[0];
            state.query.endRang = dateString[1];
        };
        const getData = async () => {
            state.query.system = props.detail.id;
            const { success, moule } = await api.statisticsModel.statisticsRequireCount(state.query);
            if (success) {
                const dateArr: any[] = [];
                const allArr: any[] = [];
                const runningArr: any[] = [];
                const finishArr: any[] = [];
                moule.forEach(({ date, all, running, finish }) => {
                    dateArr.push(date);
                    allArr.push(all);
                    runningArr.push(running);
                    finishArr.push(finish);
                });
                state.lineOption.xAxis.data = [...dateArr];
                state.lineOption.series[0].data = [...allArr];
                state.lineOption.series[1].data = [...finishArr];
                setOptions(state.lineOption);
            }
        };
        watch(() => state.query, getData, { deep: true });
        getData();
        return {
            chartRef,
            ...toRefs(state),
            rangeDateChange
        };
    }
});
</script>

